<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.datagrid</title>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/pagination.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/datagrid.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../jquery.json-2.4.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.pagination.js">
</script>
<script type="text/javascript" src="../src/jquery.datagrid.js">
</script>
<script type="text/javascript" src="../demo/datagrid_data.json">
</script>
</head>
<body>
	
<div>
  <table class="table table-bordered table-hover table-condensed" data-options="pagination:'#pager'">
    <caption>
    用于对表的描述
    </caption>
    <thead>
      <tr>
      	<th rowspan="2" data-options="field:'rn',rownumber:true">&nbsp;</th>
        <th rowspan="2" data-options="field:'chk',checkbox:true" class="x-datagrid-cell-check"><input type="checkbox"/></th>
        <th colspan="2">大标题</th>
        <th rowspan="2" data-options="field:'text3'">标题3</th>
      </tr>
      <tr>
        <th data-options="field:'text1',width:200">标题1</th>
        <th data-options="field:'text2',width:200">标题2</th>
      </tr>
    </thead>
    <tbody>      
    </tbody>
  </table>
    <div id="pager" class="pagination">
        <select class="x-pagination-page-list">
            <option selected>10</option>
            <option>20</option>
            <option>50</option>
            <option>100</option>
        </select>
		<ul>
            <li><a href="javascript:void(0)" class="x-pagination-first">首页</a>
            </li>
            <li><a href="javascript:void(0)" class="x-pagination-prev">上一页</a>
            </li>
            <li><a href="javascript:void(0)" class="x-pagination-next">下一页</a>
            </li>
            <li><a href="javascript:void(0)" class="x-pagination-last">末页</a>
            </li>
            <li><a href="javascript:void(0)" class="x-pagination-reload">刷新</a>
            </li>
        </ul>
        <span class="x-pagination-info"></span>
    </div>
</div>
<script>
$(function() {
	$('.table').datagrid({
	    //title: '测试',
	  	data: datagrid_data,
	    striped: true,
		onClickRow: function(rowIndex, rowData) {
	        $('body').append('click' + rowIndex + '<br/>' + $.toJSON(rowData) + '<br/>');
	    },
	    onDblClickRow: function(rowIndex, rowData) {
	        $('body').append('dblclick' + rowIndex + '<br/>');
	    }
	});
});
</script>
</body>
</html>